<template>
    <div class="layout" >
        <div class="content">
                    <ul class="tabs_list">
                        <li class="on">
                            <i class="iconfont icon-jizhanguanli"></i>
                            <span>园区服务类</span>
                        </li>
                        <li>
                            <i class="iconfont icon-quanxianshenpi"></i>
                            <span>园区招商</span>
                        </li>
                        <li>
                            <i class="iconfont icon-tubiao-zhuzhuangtu"></i>
                            <span>大数据</span>
                        </li>
                    </ul>
            <div class="product">
                    <div class="tabs_cont show">
                    <ul>
                        <li>
                            <div class="iconfont icon-icon_bangzhuwendang" style="font-size: 54px;float: left;color: #BEBEBF;"></div>
                            <div class="word">
                                <h4 class="tit">政策服务</h4>
                                <p>提供政策的智能匹配和分步解读功能，全面整合国家/省市区的政策信息</p>
                            </div>
                        </li>
                        <li>
                            <div class="iconfont icon-tianshenpi" style="font-size: 54px;float: left;color: #BEBEBF;"></div>
                            <div class="word">
                                <h4 class="tit">项目申报</h4>
                                <p>适用于有自主审批事项的园区（如扶持政策、扶持基金等）</p>
                            </div>
                        </li>
                        <li>
                            <div class="iconfont icon-guanfangbanben" style="font-size: 54px;float: left;color: #BEBEBF;"></div>
                            <div class="word">
                                <h4 class="tit">大赛活动</h4>
                                <p>基于大赛活动的社交特征，实现大赛活动会前、会中、会后全流程管理</p>
                            </div>
                        </li>
                        <div class="clear"></div>
                    </ul>
                </div>
            <div class="tabs_cont">
                <ul>
                    <li>
                        <div class="iconfont icon-jianceqi" style="font-size: 54px;float: left;color: #BEBEBF;"></div>
                        <div class="word">
                            <h4 class="tit">移动招商</h4>
                            <p>基于多个移动应用平台构建多渠道全流程的招商管理体系</p>
                        </div>
                    </li>
                    <li>
                        <div class="iconfont icon-gongnengdingyi" style="font-size: 54px;float: left;color: #BEBEBF;"></div>
                        <div class="word">
                            <h4 class="tit">招商项目</h4>
                            <p>建立招商专员负责机制，实现全程跟踪洽谈，促进项目落地</p>
                        </div>
                    </li>
                    <li>
                        <div class="iconfont icon-jishufuwu" style="font-size: 54px;float: left;color: #BEBEBF;"></div>
                        <div class="word">
                            <h4 class="tit">招商代办</h4>
                            <p>以企业需求为核心，建立一站式的招商代办服务体系</p>
                        </div>
                    </li>
                    <div class="clear"></div>
                </ul>
            </div>

            <div class="tabs_cont">
                <ul>
                    <li>
                        <div class="iconfont icon-gongyezujian-yibiaopan" style="font-size: 54px;float: left;color: #BEBEBF;"></div>
                        <div class="word">
                            <h4 class="tit">数据上传</h4>
                            <p>建立政府——园区——企业三级数据报送的机制</p>
                        </div>
                    </li>
                    <li>
                        <div class="iconfont icon-biaodanzujian-biaoge" style="font-size: 54px;float: left;color: #BEBEBF;"></div>
                        <div class="word">
                            <h4 class="tit">经济运行</h4>
                            <p>基于区域内各基地园区经济运行数据的汇总</p>
                        </div>
                    </li>
                    <li>
                        <div class="iconfont icon-yunyingguanli" style="font-size: 54px;float: left;color: #BEBEBF;"></div>
                        <div class="word">
                            <h4 class="tit">管控中心</h4>
                            <p>基于园区各业务条线沉淀的业务数据，通过BI分析</p>
                        </div>
                    </li>
                    <div class="clear"></div>
                </ul>
            </div>
            <div>
            </div>
            </div>
            <div class="pic">
                <img src="../../assets/jzzs.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
    import Navbar from '../layout/Navbar'
    // import $ from 'jquery'
    import '../../assets/iconfont/iconfont.css'
    export default {
        name: "WisdomPark",
        data(){
          return{
              clientHeight:document.body.clientHeight-30,
          }
        },
        components:{
            Navbar
        },
        methods:{
            tabsClick(){
                $(".tabs_list li").click(function () {
                    let _index=$(this).index()
                    $(this).addClass("on").siblings().removeClass("on")
                    $(".tabs_cont").eq(_index).addClass("show").siblings().removeClass("show")
                })
            }
        },
        mounted(){
            this.tabsClick()

        }


    }
</script>

<style lang="less" rel="stylesheet/less">
    ul, li {
        list-style: none;
    }

    .layout {
        background: #FFFFFF;
        height: 100%;
        overflow: auto;
        .content {
            width: 100%;
            height:100%;
            margin: 0px auto;
            padding: 50px 0px;

            .tabs_list {
                width: 1000px;
                margin: 0 auto;
                display: flex;
                justify-content: space-around;
                .on{
                    i {
                        color: #2c89e7;
                    }
                    span {
                        color: #2c89e7;
                    }
                }
                li {
                    margin: 0 15px 15px 15px;
                    text-align: center;
                }
                i {
                    font-size: 50px;
                    color: #858585;
                }
                span {
                    display: block;
                    font-size: 20px;
                    color: #858585;
                }
            }
            .tabs_cont {
                margin: 30px 0px;
                display: none;
                 ul {
                    padding: 20px 0;
                    background-color: #f5f5f6;
                    display: flex;
                    justify-content: center;
                    .clear {
                        clear: both;
                    }
                     li {
                         position: relative;
                         float: left;
                         width: 330px;
                         height: 100px;
                         margin: 8px 0;
                         padding-left: 30px;

                     .word {
                         float: left;
                         width: 210px;
                         padding-left: 15px;
                     }

                     .tit {
                         font-size: 20px;
                         color: #000;
                         padding-bottom: 5px;
                     }
                     }
                }

            }
            .show{
                display: block;
            }
            .pic{
                width: 600px;
                margin: 0 auto;
                img{
                    width: 100%;
                    height: auto;
                }
            }
        }
    }
</style>